<template>
    <div id="main">
        <div class="bar">
            <div class="left">
                管理员列表
            </div>
            <div class="right">
                <el-button type="success" size="mini" @click="addUser" > <i class="el-icon-plus"></i> 添加管理员</el-button>
            </div>
        </div>
        <div class="table">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="username"
                align="center"
                label="账户名"
                >
                </el-table-column>

                <el-table-column
                prop="role_id"
                align="center"
                label="角色名称"
                >
                </el-table-column>

                <el-table-column
                
                align="center"
                label="状态"
                >
                <template slot-scope="scope"> 
                    <el-button :type="scope.row.status==1? 'success': 'danger'  "  size="mini"  @click="changeStatus(scope.row)">{{  scope.row.status == 1 ? "开启" : "关闭"}}</el-button>
                </template>
                </el-table-column>
                <el-table-column
                align="center"
                label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="editUser(scope.row)">编辑</el-button>
                </template>
                </el-table-column>
            </el-table>
        </div>
 
        <!-- dialog -->
        <manager-dialog :DialogData="DialogData" :FormData="FormData" @update="getManager"></manager-dialog>
    </div>
</template>

<script>
    import ManagerDialog from "@/components/dialog/ManagerDialog"
    export default {
        data() {
            return {
                tableData: [],
                DialogData: {
                    title: "",
                    show: false,
                },
                FormData: {},
            }
        },
        components: {
            ManagerDialog,
        },
        computed: {
            token() {
                return localStorage.token; 
            }
        },
        mounted() {
            this.getManager()
        },
        methods: {
            // 获取所有管理员
            async getManager() {
                let res =await this.$axios.post("/admin/role/index", { token: this.token })
                console.log(res);
                if(res.data.code == 200) {
                    this.tableData = res.data.data
                }
                
            },
            // 编辑用户
            editUser( user ) {
                this.DialogData = {
                    title: "编辑管理员",
                    show: true,
                    edit: true,
                    add: false,
                }
                this.FormData = user
            },
            // 添加
            addUser() {
                this.DialogData = {
                    title: "添加管理员",
                    show: true,
                    edit: false,
                    add: true,
                }
                this.FormData = {}
            },

            // 状态改变
            async changeStatus( user ) {
                // console.log(user);
                let res = await this.$axios.post("/admin/role/adminhandle", { token: this.token, userid: user.userid })
                console.log(res);
                let code = res.data.code
                if(code == 202 || code == 204) {
                    this.$message.success("更新成功")
                    this.getManager()
                } else  {
                    this.$message.success("更新失败")
                    this.getManager()
                }
                
            },
        },
    }
</script>

<style lang="scss" scoped>
 #main {
     width: 100%;
     box-sizing: border-box;
     .bar {
         width: 100%;
         font-weight: bold;
         display: flex;
         justify-content: space-between;
         height: 40px;
         line-height: 40px;
         border-bottom: 1px solid #aaa;
     }
     .table {
         margin-top: 20px;
     }
 }
</style>